<template>
	<view class="page-body" :style="{'background':isOpen?'#f6f6f6':'#fff'}">
		<block v-if="isOpen">
			<view class="banner">
				<view class="banner-body">
					<view class="p">账户余额</view>
					<view class="h2">{{lendAsset | tofixed}}</view>
				</view>
				<view class="btn-row flex">
					<view class="button" @click="toRecharge">
						充值
					</view>
					<view class="button" @click="toWithdraw">
						提现
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="row " @click="goBindaccount" v-if="!isOpen">
					<view class="title">开通支付账户</view>
					<view class="right"><view class="tis">{{isOpen?'已开通':'未开通'}}</view><view class="icon xiangyou"></view></view>
				</view>
				<view class="row mt15" @click="goModified ">
					<view class="title">修改支付密码</view>
					<view class="right"><view class="tis">修改</view><view class="icon xiangyou"></view></view>
				</view>
				<view class="row" @click="forget">
					<view class="title">忘记支付密码</view>
					<view class="right"><view class="tis">找回</view><view class="icon xiangyou"></view></view>
				</view>
				<view class="row mt30" @click="goBank">
					<view class="title" >我的银行卡</view>
					<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
				</view>
			</view>
		</block>
		<block v-else>
			<view :style="{'height':winHeight/2+'px'}" class="other flex">
				<defalut type="3" flexend="true" text="未开通账户"></defalut>
				<view class="statetxt">您还未开通连连支付账户，请前往连连账户中心开通</view>
				<view class="button btn-go mt50" @click="goBindaccount">去开通</view>
			</view>
		</block>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex';
	import defalut from '@/components/defalut.vue';
	export default {
		data() {
			return {
				lendAsset:"0",
				bank_account:"",
				withdraw:""
			}
		},
		onLoad(options){
			that=this;
			// #ifdef APP-PLUS
			// #endif
			// this.getbalance()
			// this.getUserData()
		},
		onShow() {
			this.getbalance()
		},
		methods: {
			getUserData(){
				this.$https.POST({
					url:'/pay/lianlianBindcard',
					passurl:true,
					data:{
					},
					success(res){
						if(res.code==10000){
							that.isOpen = true
						}else{
							that.isOpen = false
						}
					}
				})
			},
			getbalance(){
				this.$https.POST({
					url:'/pay/queryAcctinfo',
					data:{
					},
					success(res){
						that.lendAsset = res.data.available;
						that.bank_account = res.data.bank_account;
						that.withdraw = res.data.withdrawable
					}
				})
			},
			/* 银行卡管理 */
			goBank(){
				uni.navigateTo({
					url:"/pages/user/bank/card?isOpenAccount="+this.isOpen
				})
			},
			/* 支付密码 */
			forget(){
				uni.navigateTo({
					url:"/pages/user/SAM/payword/findpayword1"
				})
			},
			goModified(){
				uni.navigateTo({
					url:"/pages/user/SAM/payword/modified"
				})
			},
			/* 开通支付账户 */
			goBindaccount(){
				uni.navigateTo({
					url:"/pages/user/SAM/openaccount/openaccount"
				})
			},
			toWithdraw(){
				uni.navigateTo({
					url:"/pages/user/SAM/withdraw?withdraw="+that.withdraw
				})
			},
			toRecharge(){
				uni.navigateTo({
					url:"/pages/user/SAM/recharge?lendAsset="+this.lendAsset+"&bank_account="+this.bank_account
				})
			}
		},
		computed:mapState({
			isOpen(state){
				return state.isOpenAccount
			},
			winHeight(state){
				return state.winHeight
			},
			refresh(state){
				return state.refresh;
			}
		}),
		components:{
			defalut
		},
		watch:{
			refresh(newValue,oldValue){
				if(newValue){
					that.getbalance()
				}
			}
		},
		filters:{
			tofixed(value){
				return parseFloat(value).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
.page-body{
	background-color: #f6f6f6;	
}
.btn-row{
	box-sizing:border-box;padding:30upx 0 20upx;
	.button{width: 30%;border-radius: 10upx;}
}
.banner{
		background: #fff;padding:10upx 20upx 10upx; text-align: center;
		.banner-body{	width: 670upx;height: 180upx;background:linear-gradient( 45deg, rgb(255,98,0) 1%, rgb(255,114,15) 55%, rgb(255,146,44) 100%); border-radius: 10upx 10upx 0 0; color: #fff;margin: 0 auto;padding-top:40upx ;}
		.h2{font-size: 60upx;}
		.p{font-size: 24upx;opacity: .7;line-height: 60upx;}
		.block{margin-top:30upx;}
		.block-1{text-align: right;padding-right: 30upx;width: 50%;position: relative;}
		.block-1::after{
			content: "";
			display: block;
			width: 1px; height: 60upx;background: #fff;
			position: absolute; right: 0;top: 8upx;opacity: .7;
		}
		.block-2{text-align: left;padding-left: 30upx;width: 50%;}
		.h3{font-size: 36upx;;line-height: 46upx;}
	}
.icon {
	font-size: 26upx;
}
.list{
	width: 100%;
	margin-bottom: 20upx;
	.row{
		padding-left: 4%;
		box-sizing: border-box;
		min-height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 1upx #eee;
		background-color: #fff;
		&:last-child{
			border-bottom: none;
		}
		.title{
			font-size: 30upx;
			color: #232323;
		}
		.right{
			display: flex;
			align-items: center;
			color: #999;
			.tis{
				font-size: 28upx;
				margin-right: 5upx;
				max-height: 120upx;
				image{
					width: 100upx;
					height: 100upx;
					border-radius: 100%;
					margin: 10upx 0;
				}
			}
			.icon{
				width: 40upx;
				color: #cecece;
			}
		}
		
	}
}
.other{
	text-align: center; flex-direction: column; justify-content: center;
	.default{height: 10%;font-size: 30upx;}
	.statetxt{line-height: 60upx;}
	.btn-go{width: 360upx;}
}
</style>
